<template>
  <s-layout class="set-wrap" :title="state.title" :bgStyle="{ color: '#FFF' }">
    <view class="ss-p-30"><mp-html class="richtext" :content="state.content"></mp-html></view>
	
	<su-fixed bottom placeholder bg="bg-white" v-if="state.order != 1">
		<view class="ui-tabbar-box">
			<button class="buy-btn" @click="buy">
			   购买
			</button>
		</view>
	</su-fixed>
  </s-layout>
</template>

<script setup>
  import { onLoad } from '@dcloudio/uni-app';
  import { reactive } from 'vue';
  import sheep from '@/sheep';

  const state = reactive({
    title: '',
    content: '',
  });
  
  async function buy() {
  	  const { code, data } = await sheep.$api.financial.buy_financial({ids: state.id});
	  if (code === 1) {
		  uni.showToast({
			  icon: 'none',
		    title: '购买成功',
		  });
		  setTimeout(() => {
			  sheep.$router.back()
		  }, 1000)
	  }
  }

  async function getRichTextContent(id) {
    const { code, data } = await sheep.$api.financial.detail(id);
    if (code === 1) {
		state.id = data.id
      state.content = data.content;
      if (state.title === '') {
        state.title = data.title;
        uni.setNavigationBarTitle({
          title: state.title,
        });
      }
    }
  }
  onLoad((options) => {
    if (options.title) {
      state.title = options.title;
      uni.setNavigationBarTitle({
        title: state.title,
      });
    }
	if(options.order) state.order = options.order
    getRichTextContent(options.id);
  });
</script>

<style lang="scss" scoped>
  .set-title {
    margin: 0 30rpx;
  }

  .richtext {
  }
  .ui-tabbar-box {
	  padding: 20rpx;
    box-shadow: 0px -6px 10px 0px rgba(51, 51, 51, 0.2);
  }
  .buy-btn {
    height: 72rpx;
    font-weight: 500;
    font-size: 28rpx;
  
    border-radius: 40rpx;
    color: $white;
	background-color: #cf3835;
  }
</style>
